<template>
  <avue-crud ref="crud"
             :option="option1"
             :data="data1"
             @tree-load="treeLoad"
             @row-save="rowSave"
             @row-update="rowUpdate">
    <template #menu="{row,size}">
      <el-button :size="size"
                 text
                 type="primary"
                 @click="handleAdd(row)">新增子级</el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      parentId: undefined,
      option1: {
        lazy: true,
        rowKey: 'id',
        column: [{
          label: '姓名',
          prop: 'name'
        }, {
          label: '日期',
          prop: 'date'
        }, {
          label: '地址',
          prop: 'address',
          overHidden: true
        }]
      },
      data1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    rowDel (row, index, done) {
      done(row)
    },
    rowSave (row, done) {
      row.parentId = this.parentId;
      row.id = new Date().getTime()
      this.parentId = undefined;
      done(row)
    },
    rowUpdate (row, index, done) {
      done(row)
    },
    handleAdd (row) {
      this.parentId = row.id
      this.$refs.crud.rowAdd()
    },
    treeLoad (tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([{
          id: new Date().getTime(),
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }
        ])
      }, 1000)
    }
  }
}
</script>